<template>
	<div class="login_container">
		<!-- 登录的表单 -->
		<el-form class="login_form" :model="loginForm" ref="loginForms">
			<h1>Hello</h1>
			<h2>欢迎来到校园服务平台</h2>
			<el-form-item prop="mobile">
				<el-input prefix-icon="el-icon-user" v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="请输入密码"
					show-password></el-input>
			</el-form-item>
			<el-form-item>
				<el-button :loading="loading" class="login_btn" type="primary" size="default"
					@click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { login, user_info } from "@/api/auth";
import { set_token } from "@/utils/token";
import { set_info } from '@/utils/info';

export default {
	data() {
		return {
			loginForm: {
				mobile: "13966751204",
				password: "123456",
			},
			loading: false
		};
	},
	methods: {
		async submitLogin() {
			if (!this.loginForm.mobile) {
				this.$message({ type: "error", message: "输入手机号" });
				return;
			}
			const reg = /^1[3|4|5|6|8|9][0-9]\d{8}$/;
			if (!reg.test(this.loginForm.mobile)) {
				this.$message({ type: "error", message: "输入正确的手机号" });
				return;
			}
			if (!this.loginForm.password) {
				this.$message({ type: "error", message: "请输入密码" });
			}
			this.loading = true
			try {
				const token = await login({ mobile: this.loginForm.mobile, password: this.loginForm.password });
				set_token(token);
				const userInfo = await user_info();
				set_info(userInfo);
				this.$router.push({
					path: "/home",
				});
				//发送上线通知
				this.sendNotify(userInfo.username)
			} catch (error) {
				this.$message.error(error);
			} finally {
				this.loading = false
			}
		},
		//发送通知
		sendNotify(username) {
			this.$notify({
				title: 'Campus',
				message: username + ' 欢迎来到Campus',
				type: 'success'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.login_container {
	width: 100%;
	height: 100vh;
	background: url("../../assets/img/background.jpg") no-repeat;
	background-size: cover;

	.login_form {
		position: relative;
		width: 20%;
		top: 30vh;
		margin-left: 60%;
		background: url("../../assets/img/login_form.png") no-repeat;
		background-size: cover;
		padding: 40px;

		h1 {
			color: white;
			font-size: 40px;
		}

		h2 {
			font-size: 20px;
			color: white;
			margin: 20px 0px;
		}

		.login_btn {
			width: 100%;
		}
	}
}
</style>
